---
id: pagination
title: Pagination
description: A navigation component that allows users to browse through pages.
---

<ComponentPreview id="Pagination" />

## Anatomy

To set up the pagination correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="pagination" />

## Examples

Learn how to use the `Pagination` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Controlled Pagination

To create a controlled Pagination component, manage the state of the current page using the `page` prop and update it
when the `onPageChange` event handler is called:

<Example id="controlled" />

### Customizing Pagination

You can customize the Pagination component by setting various props such as `dir`, `pageSize`, `siblingCount`, and
`translations`. Here's an example of a customized Pagination:

<Example id="customized" />

### Using Context

The `Context` component provides access to the pagination state and methods through a render prop pattern. This allows
you to access methods like `setPage`, `setPageSize`, `goToNextPage`, `goToPrevPage`, `goToFirstPage`, `goToLastPage`, as
well as properties like `totalPages` and `pageRange`.

<Example id="context" />

### Data Slicing

Use the `slice()` method to paginate actual data arrays. This method automatically slices your data based on the current
page and page size.

<Example id="data-slicing" />

### Page Range Display

Display the current page range information using the `pageRange` property. This shows which items are currently visible
(e.g., "Showing 1-10 of 100 results").

<Example id="page-range" />

### Page Size Control

Control the number of items per page dynamically using `setPageSize()`. This example shows how to integrate a native
select element to change the page size.

<Example id="page-size-control" />

### Link Pagination

Create pagination with link navigation for better SEO and accessibility. This example shows how to use the pagination
component with anchor links instead of buttons.

<Example id="link" />

### Root Provider

The `RootProvider` component provides a context for the pagination. It accepts the value of the `usePagination` hook.
You can leverage it to access the component state and methods from outside the pagination.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="pagination" />

### Context

These are the properties available when using `Pagination.Context`, `usePaginationContext` hook or `usePagination` hook.

<ContextType id="pagination" />
